<template>
  <div v-if="!isClient" :class="[inlineBlock?'w-fit':'',inlineBlock?'inline-block':'']">
    <el-form-item label="收款账号" prop="accountIds">
      <!-- 第一个 el-select 控件 -->
      <el-select
        v-model="innerValue"
        filterable
        clearable
        placeholder="请填写收款账号"
        multiple
        ref="allAccount"
        @change="changeSelect('allAccount')"
        @visible-change="visibleSelect"
        popper-class="all_popper"
        class="all_account"
        :max-collapse-tags="3"
        collapse-tags
        collapse-tags-tooltip
        :filter-method="filterSelect"
      >
        <el-option v-for="item in accountList" :key="item.accountId" :value="item.accountId" :label="item.accountName"></el-option>
      </el-select>

      <!-- 根据条件显示不同的 el-select -->
      <el-select
        v-model="innerValue"
        filterable
        clearable
        placeholder="请填写收款账号"
        @change="changeSelect('normalAccount')"
        multiple
        ref="normalAccount"
        :visible="visible"
        popper-class="normal_popper"
        class="normal_account"
        :max-collapse-tags="3"
        collapse-tags
        collapse-tags-tooltip
      >
        <template #header>
          <div @click="changeSelect('normalAccount')" class="font-bold">使用中账号</div>
        </template>
        <template v-for="item in accountList" :key="item.accountId">
          <el-option v-show="item.isDelete == false" :value="item.accountId" :label="item.accountName"></el-option>
        </template>
      </el-select>

      <el-select
        v-model="innerValue"
        filterable
        clearable
        placeholder="请填写收款账号"
        @change="changeSelect('deleteAccount')"
        multiple
        ref="deleteAccount"
        :visible="visible"
        popper-class="delete_popper"
        class="delete_account"
        :max-collapse-tags="3"
        collapse-tags
        collapse-tags-tooltip
      >
        <template #header>
          <div @click="changeSelect('deleteAccount')" class="font-bold">回收站账号</div>
        </template>
        <template v-for="item in accountList" :key="item.accountId">
          <el-option v-show="item.isDelete == true" :value="item.accountId" :label="item.accountName"></el-option>
        </template>
      </el-select>
    </el-form-item>
  </div>
</template>

<script setup>
import { queryListPayAccount } from '@/api/pay/PayAccount';
import { ref, watch, defineProps, defineEmits } from 'vue';

const normalAccount = ref(null);
const deleteAccount = ref(null);
const allAccount = ref(null);
const changeSelect = (val) => {
  switch (val) {
    case 'normalAccount':
      deleteAccount.value.toggleMenu();
      // normalAccount.value.toggleMenu();
      break;

    case 'deleteAccount':
      normalAccount.value.toggleMenu();
      // deleteAccount.value.toggleMenu();
      break;
  }
};

const visibleSelect = (val) => {
  if (val == true) {
    normalAccount.value.toggleMenu();
    deleteAccount.value.toggleMenu();
  }
};
const visible = ref(false);
const props = defineProps({
  modelValue: {
    type: [Array, String, Number],
    default: () => []
  },
  inlineBlock:{
    type: Boolean,
    default: true
  },
  accountList: {
    type: Array,
    default: () => []
  },
  isClient: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:modelValue']);

const innerValue = ref([]);
watch(
  () => innerValue.value,
  (val) => {
    emits('update:modelValue', val);
  }
);
watch(
  () => props.modelValue,
  (val) => {
    innerValue.value = val;
  }
);

const accountList = ref([]);
const copyArr = ref([]);
const getAccount = () => {
  queryListPayAccount({ pageSize: 2000, pageNum: 1 }).then((res) => {
    accountList.value = res.data.map((item) => {
      item.isDelete = false;
      return item;
    });

    queryListPayAccount({ pageSize: 2000, pageNum: 1, isDelete: 1 }).then((res) => {
      let arr = res.data.map((item) => {
        item.isDelete = true;
        return item;
      });
      accountList.value = accountList.value.concat(arr);
      copyArr.value = accountList.value;
    });
  });
};

const filterSelect = (val) => {
  console.log(val);
  if (val) {
    accountList.value = copyArr.value.filter((item) => {
      if (item.accountName.includes(val)) {
        return item;
      }
    });
  } else {
    accountList.value = copyArr.value;
  }
};

if (!props.isClient) {
  getAccount();
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  position: relative;
}

.all_account {
}
.normal_account {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}
.delete_account {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}
</style>

<style>
.all_popper {
  display: none !important;
}
.normal_popper {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radios: 8px;
  width: 280px;
  min-width: 0 !important;
}
.delete_popper {
  position: absolute;
  left: 300px;
  top: 0;
  background: #fff;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
  border-radios: 8px;
   min-width: 0 !important;
}
</style>
